<template>
  <el-dialog
    v-if="visible"
    v-dialogDrag
    modal
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="90%"
  >
    <div slot="title" class="dialog-header">换签履历</div>
    <div class="table-name-content">换签履历</div>
    <wz-table :columns="mcDetails" :use-index="true" :table-data="fileData">
      <template #oldLabel="{ row }">
        <div class="click-row" @click="jump(row,row.oldLabel)">
          {{ row.oldLabel }}
        </div>
      </template>
      <template #newLabel="{ row }">
        <div class="click-row" @click="jump(row,row.newLabel)">
          {{ row.newLabel }}
        </div>
      </template>
        <template #uploadImageList="{ row }">
            <div style="display: flex;flex-wrap: wrap">
                <div v-for="(item,index) in getImgUrl(row.uploadImageList)" :key="index">
                    <el-image
                        style="width: 50px; height: 50px;margin-right: 5px"
                        :src="item"
                        :preview-src-list="getImgUrl(row.uploadImageList)">
                    </el-image>
                </div>
            </div>
        </template>
    </wz-table>
  </el-dialog>
</template>

<script>
import { openAssetFull } from '@/api/material'

const YARD_SWAP_COLUMNS = [
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '资源资产编码',
        prop: 'resourceAssetCode',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '原标签ID',
        prop: 'oldLabel',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '现标签ID',
        prop: 'newLabel',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '换签人',
        prop: 'swapUser',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '换签原因',
        prop: 'reason',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '换签时间',
        prop: 'swapTime',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '经纬度',
        prop: 'latitudeAndLongitude',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '具体情况说明',
        prop: 'remark',
        elProps: {
            width: '150px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '照片',
        prop: 'uploadImageList',
        elProps: {
            width: '250px',
        }
    }
]

import wzTable from '../components/cTable.vue'
import $ from 'jquery'
export default {
    name: 'SwapLableDialog',
    components: { wzTable },
    props: {
        materialRemovalVisible: {
            type: Boolean,
            default: false
        },
        currentRow: {
            type: Object,
            default: () => ({ })
        },
        fileData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            mcDetails: [],
            resourceCoding: [],
            assetsFileData: [],
            visible: false,
            url: '',
            token: '',
            userId: '',
            acctId: ''
        }
    },
    computed: {
        query() {
            return this.$route.query
        }
    },
    watch: {
        materialRemovalVisible: {
            handler(value) {
                this.visible = value
            },
            immediate: true
        },
        visible(value) {
            this.$emit('update:materialRemovalVisible', value)
        }
    },
    async mounted() {
        this.mcDetails = JSON.parse(
            JSON.stringify(YARD_SWAP_COLUMNS)
        )
        const openAssetFullRes = await openAssetFull()
        console.log(openAssetFullRes)
        if (+openAssetFullRes.code === 200) {
            this.url = openAssetFullRes.data.url
            this.token = openAssetFullRes.data.token
            this.userId = openAssetFullRes.data.userId
            this.acctId = openAssetFullRes.data.acctId
        }
    },
    methods: {
        getImgUrl(array){
           return array.map( (item) => window.location.protocol + "//" + window.location.host + "/pic/pic/openUrl?httpUrl="+ item)
        },
        // 点击标签id跳转经分系统
        jump(row, labelId) {
            console.log(row)
            const toUrl = `${this.url}ctb_thematic_web/newTowerSkip/assetsRecordNew?res_id=${labelId}&resourceAssetCode=${row.resourceAssetCode}`
            const params = {}
            params.pwdaToken = this.token
            params.acctId = this.acctId
            params.userName = this.userId
            const newWin = window.open()
            const form = $("<form method='post'></form>")
            form.attr({ action: toUrl })
            $.each(params, function(key, value) {
                const input = $("<input type='hidden' >")
                input.attr({ name: key })
                input.val(value)
                form.append(input)
            })
            form.appendTo(newWin.document.body)
            form.submit()
        }
    }
}
</script>
<style lang="scss" scoped>

.mt-10 {
    margin-top: 10px;
}

.click-row {
    color: #53c7f8;
    cursor: pointer;
}
</style>
